<template>
    <div>
        <h2>侦听器的语法</h2>
        <div>{{num}}--->{{num2}}</div>
        <button @click="num++">+</button>
        <hr>
        <h2>侦听引用数据类型</h2>
        <h3>侦听对象</h3>
        <div>{{numbers.a}}---->{{numbers['b']}}</div>
        <button @click="numbers.a++">a++</button>
        <button @click="numbers.b--">b--</button>
        <hr>
        <h3>侦听数组</h3>
        <div>{{ary}}</div>
        <button @click="ary[0].age++">更改giles的年龄</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            num:0,
            numbers:{
                a:1,
                b:2
            },
            ary:[
                {
                    name:'Giles',
                    age:18
                },
                {
                    name:'Monica',
                    age:17
                }
            ]
        }
    },
    computed:{
        num2:function(){
            return this.num*2
        },
        newNumbers(){
            return JSON.parse(JSON.stringify(this.numbers))
        },
        newAry(){
            return JSON.parse(JSON.stringify(this.ary))
        }
    },
    watch:{
        //标准写法
        num:{
           immediate:true,
           //hanlder函数的参数，参数1：新值,参数2：旧值
           handler:function(newval,oldval){
             console.log('----num数据变化了------');
             console.log(newval,oldval);
           } 
        },
        //简写形式
        /* 
            data中数据名/计算属性名(){}
        */
        num2(newval,oldval){
            console.log('------num2数据变化--------');
            console.error(newval,oldval);
        },
        "numbers.a"(newval,oldval){
            console.log('------numbers对象中的a属性发生了变化-----------');
            console.log(newval,oldval);
        },
        'numbers.b':function(newval,oldval){
            console.log('------numbers对象中的b属性发生了变化-----------');
            console.log(newval,oldval);
        },
        //监听对象
        /*
            watch在深度侦听的时候，得到的新对象和旧对象其实都是新对象，此时旧对象会被新对象给覆盖，如果大家要做对比
            此时可以使用计算属性将要监听的对象进行深拷贝，然后监听深拷贝的对象就能完成不被覆盖的问题
        */
        newNumbers:{
            deep:true,//开启深度监听，默认情况下深度监听是被关闭的(deep:false)，如果要开始就必须设置(deep:true)
            handler(newval,oldval){
                console.log('--------numbers对象中的x属性发生变化了----------');
                console.log(newval,oldval);
            }
        },
        newAry:{
            deep:true,
            immediate:true,//就对与newAry对象开启了立即监听
            handler(newval,oldval){
                console.log('----------ary中的对象发生了变化---------------------------');
                console.log(newval,oldval);
            }
        }

        
    }
}
</script>

<style>

</style>